<template>
	<view>
		<!-- 背景 -->
		<view class="data_bg">
			<!-- 导航 -->
			<view class="option">
				<view class="voucher" v-bind:class="{toogle:isActive}" @click="voucher()">
					<view class="list">卖券榜</view>
				</view>
				<view class="spread" v-bind:class="{toogle:!isActive}" @click="spread()">
					<view class="list">传播榜</view>
				</view>
			</view>
			<!-- 奖牌 -->
			<view class="medal" v-if="spool">
				<view class="two">
					<view class="runner_up">
						<image class="two_bg" src="../../static/datasheets/runner_up.png"></image>
						<image class="head_bg" :src="head_two"></image>
						<image class="number_two" src="../../static/sellcoupon_and_propagation/two.png"></image>
						<view class="user_name">{{name_two}}</view>
					</view>
					<view class="quantity">
						<view class="digital">{{volume_two}}</view>
						<view class="apply">报名人数</view>
					</view>
				</view>
				<view class="one">
					<view class="champion">
						<image class="one_bg" src="../../static/datasheets/champion.png"></image>
						<image class="headone" :src="head_one"></image>
						<image class="number_one" src="../../static/sellcoupon_and_propagation/one.png"></image>
						<view class="user_one">{{name_one}}</view>
					</view>
					<view class="quantity_one">
						<view class="digital">{{volume_one}}</view>
						<view class="apply">报名人数</view>
					</view>
				</view>
				<view class="three">
					<view class="third_place">
						<image class="three_bg" src="../../static/datasheets/third_place.png"></image>
						<image class="headthree" :src="head_three"></image>
						<image class="number_three" src="../../static/sellcoupon_and_propagation/three.png" ></image>
						<view class="user_three">{{name_three}}</view>
					</view>
					<view class="quantity_three">
						<view class="digital">{{volume_three}}</view>
						<view class="apply">报名人数</view>
					</view>
				</view>
			</view>
			<!-- 传播人数-->
			<view class="medal" v-if="!spool">
				<view class="two">
					<view class="runner_up">
						<image class="two_bg" src="../../static/datasheets/runner_up.png"></image>
						<image class="head_bg" :src="two_head"></image>
						<image class="number_two" src="../../static/sellcoupon_and_propagation/two.png"></image>
						<view class="user_name">{{two_name}}</view>
					</view>
					<view class="quantity">
						<view class="digital">{{two_volume}}</view>
						<view class="apply">传播人数</view>
					</view>
				</view>
				<view class="one">
					<view class="champion">
						<image class="one_bg" src="../../static/datasheets/champion.png"></image>
						<image class="headone" :src="one_head"></image>
						<image class="number_one" src="../../static/sellcoupon_and_propagation/one.png"></image>
						<view class="user_one">{{one_name}}</view>
					</view>
					<view class="quantity_one">
						<view class="digital">{{one_volume}}</view>
						<view class="apply">传播人数</view>
					</view>
				</view>
				<view class="three">
					<view class="third_place">
						<image class="three_bg" src="../../static/datasheets/third_place.png"></image>
						<image class="headthree" :src="three_head"></image>
						<image class="number_three" src="../../static/sellcoupon_and_propagation/three.png" ></image>
						<view class="user_three">{{three_name}}</view>
					</view>
					<view class="quantity_three">
						<view class="digital">{{three_volume}}</view>
						<view class="apply">传播人数</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 未上领奖台的排名 -->
		<view class="row" ref="a" v-if="apply">
			<view class="unreceived" v-for="(descending,index) in descendings" :key="descending.id">
				<view class="ranking">{{descending.id}}</view>
				<image class="header" :src="descending.icon"></image>
				<view class="name">{{descending.name}}</view>
				<view class="sales_volume">{{descending.num}}<text class="unit">人</text></view>
			</view>
		</view>
		<view class="row" ref="a" v-if="!apply">
			<view class="unreceived" v-for="(propagation,index) in propagations" :key="propagation.id">
				<view class="ranking">{{propagation.id}}</view>
				<image class="header" :src="propagation.icon"></image>
				<view class="name">{{propagation.name}}</view>
				<view class="sales_volume">{{propagation.num}}<text class="unit">人</text></view>
			</view>
		</view>
		<!-- 广告 -->
		<view :class="{AD:isAD,activeAD:isActiveAd}">
			<image class="zanboon" src="../../static/sellcoupon_and_propagation/zanboon.png"></image>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive:true,
				// 报名
				id:2,
				head_two:'../../static/datasheets/two.jpg',
				name_two:'库里',
				volume_two:'400',
				id:1,
				head_one:'../../static/datasheets/two_1.jpg',
				name_one:'詹姆斯',
				volume_one:'500',
				id:3,
				head_three:'../../static/datasheets/two.jpg',
				name_three:'杜兰特',
				volume_three:'300',
				spool:true,
				// 传播
				two_head:'../../static/datasheets/two_1.jpg',
				two_name:'黄雨鑫',
				two_volume:'888',
				one_head:'../../static/datasheets/two.jpg',
				one_name:'黄雨像',
				one_volume:'988',
				three_head:'../../static/datasheets/two_1.jpg',
				three_name:'黄余添',
				three_volume:'788',
				// 报名未领奖排名
				descendings:[
					{   
						id:4,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨鑫',
						num:'655'	
					},
					{   
						id:5,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨',
						num:'500'	
					},
					{   
						id:6,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨鑫',
						num:'566'	
					},
					{   
						id:7,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨',
						num:'654'	
					},
					{   
						id:8,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨鑫',
						num:'10250'	
					},
					{   
						id:9,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨',
						num:'1000'	
					},
					{   
						id:10,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨',
						num:'1000'	
					}
				],
				// 传播未领奖排名
				propagations:[
					{   
						id:4,
						icon:'../../static/datasheets/two_1.jpg',
						name:'黄雨鑫',
						num:'10000'	
					},
					{   
						id:5,
						icon:'../../static/datasheets/two_1.jpg',
						name:'巷道',
						num:'1000'	
					},
					{   
						id:6,
						icon:'../../static/datasheets/two_1.jpg',
						name:'韩给',
						num:'100'	
					},
					{   
						id:7,
						icon:'../../static/datasheets/two_1.jpg',
						name:'李四',
						num:'10'	
					},
					{   
						id:8,
						icon:'../../static/datasheets/two_1.jpg',
						name:'张三',
						num:'10'	
					},
					{   
						id:9,
						icon:'../../static/datasheets/two_1.jpg',
						name:'账上',
						num:'10'	
					},
					{   
						id:10,
						icon:'../../static/datasheets/two_1.jpg',
						name:'展示',
						num:'10'	
					}
				],
				isAD:true,
				isActiveAd:false,
				apply:true,
			}
		},
		onLoad(option) {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					// console.log(res.screenHeight,'手机的高度');
					that.Height=res.screenHeight;
				}
			});
			// console.log(option.id,'69');
			if(option.id==0){
				that.voucher();
			}else if(option.id==1){
				that.spread();
			}
		},
		onReady(){
			let that=this;
			// console.log(that.$refs.a,'654');
			// console.log(that.$refs.a.$el.clientHeight,'654a');
			// console.log(that.$refs.b.$el.clientHeight,'456b');
			// console.log(that.$refs.c.$el.clientHeight,'369c');
			that.row=that.$refs.a.$el.clientHeight;
			that.quantity();
		},
		methods:{
			voucher:function(){
				let that=this;
				that.isActive=true;
				that.spool=true;
				that.apply=true;
			},
			spread:function(){
				let that=this;
				that.isActive=false;
				that.spool=false;
				that.apply=false;
			},
			quantity:function(){
				let that=this;
				//let Height=that.Height-that.row;//手机高度减去内容高度
				let Height=that.Height-379;
				// console.log(Height,'369');
				if(Height>that.row){
					that.isAD=true;
					that.isActiveAd=false;
				}else if(Height<that.row){
					that.isAD=false;
					that.isActiveAd=true;
				}
			}
		}
	}
</script>

<style>
	page{
		background:#F5F5F5;
	}
		.data_bg{
			height: 688upx;
			background:url(../../static/datasheets/databg.png);
			background-repeat:no-repeat;
			background-size: 100% 100%;
			margin-bottom: 10upx;
		}
			.option{
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content:space-around ;
				color:rgba(255,255,255,0.74);
				font-size: 28upx;
			}
			.toogle{
				color:#FFFFFF;
				border-bottom:4upx solid #FFFFFF  ;
			}
				.voucher{
					margin-left:50upx;
				}
				.spread{
					margin-right:50upx;
				}
				.list{
					margin-bottom: 10upx;
				}
			.medal{
				display: flex;
				align-items: stretch;
				height: 600upx;
			}
				.two{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 208upx;
					height: 600upx;
					margin-left: 30upx;
				}
					.runner_up{
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						height: 452upx;
						width: 208upx;
					}
						.two_bg,.one_bg,.three_bg{
							margin-bottom: 10upx;
							height: 32upx;
							width:50upx;
						}
						.head_bg,.headthree{
							height: 120upx;
							width:120upx;
							border-radius:50% ;
						}
						.user_name{
							position: absolute;
							top:440upx;
							color: #FFFFFF;
							font-size: 30upx;
						}
						.number_two,.number_one{
							position: absolute;
							height: 48upx;
							width: 48upx;
						}
						.number_two{
							top:380upx;
						}
					.quantity,.quantity_one{
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						color: #FFFFFF;
					}
					.quantity{
						height: 148upx;
						width: 208upx;
					}	
						.digital{
							font-size: 40upx;
							font-weight:550;
						}
						.apply{
							font-size: 24upx;
						}
				.one{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: 268upx;
					height: 600upx;
				}
				.champion{
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					height: 388upx;
					width: 268upx;
				}
					.headone{
						height: 148upx;
						width: 148upx;
						border-radius: 50%;
					}
					.number_one{
						top: 320upx;
					}
					.user_one{
						position: relative;
						margin-top: 50upx;
						color: #FFFFFF;
						font-size: 32upx;
					}
				.quantity_one{
					height: 212upx;
					width: 268upx;
				}
			.three{
				width: 214upx;
				height: 600upx;
				margin-right: 30upx;
			}
				.third_place{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					height: 494upx;
					width: 214upx;
				}
				.quantity_three{
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					color: #FFFFFF;
					height: 106upx;
					width: 214upx;
				}
				.number_three{
					position: absolute;
					height: 48upx;
					width: 48upx;
					top: 384upx;
				}
				.user_three{
					position:relative;
					top:48upx;
					color: #FFFFFF;
					font-size: 30upx;
				}
			.row{
				
			}
				.unreceived{
					display: flex;
					align-items: center;
					height: 110upx;
					background:#FFFFFF;
					color: #333333;
					margin-bottom: 10upx;
				}
					.ranking{
						font-size: 28upx;
						margin:0upx 36upx 0upx 38upx;
					}
					.header{
						height: 84upx;
						width:84upx;
						border-radius: 50%;
						}
					.name{
						font-size: 30upx;
						margin-left:30upx;
					}
					.sales_volume{
						margin-left:auto;
						margin-right:30upx;
						color: #D60C09;
						font-size: 32upx;
					}
						.unit{
							margin-left:10upx;
							color: #666666;
							font-size: 28upx;
						}
			.AD{
				position: absolute;
				margin-bottom: 20upx;
				bottom: 0;
				left: 267upx;
				
			}
		.activeAD{
			position: relative;
			display: flex;
			justify-content: center;
			margin-top:34upx;
			margin-bottom: 20upx;
		}
				.zanboon{
					height: 28upx;
					width: 216upx;
					
				}
			
</style>
